<template lang="pug">
  el-drawer.commonDrawer(
    title="选择上课宝宝"
    :visible="visibleDialog"
    append-to-body
    center
    destroy-on-close
    direction="rtl"
    size="54%"
    @close="$_handleCancel"
  )
    .drawer-content(v-loading="loading")
      alert.title(:title="course.classesName")
        p {{course.courseName}}
        p 上课时间：{{course.beginTime | dateFilter('YYYY/MM/DD HH:mm:ss')}} ~ {{course.endTime | dateFilter('YYYY/MM/DD HH:mm:ss')}}
      el-transfer.mt20(
        key="id"
        v-model="selectChildrenIds"
        :props="{key: 'id', label: 'name'}"
        :data="children"
      )
        span(slot-scope="{ option }")
          el-avatar.mr5.vm(:src="option.imgUrl" :size="24" icon="el-icon-user-solid")
          | {{option.name}}
    .drawer-footer.tr
      el-button(size="small" type="danger" @click="earlyScheduleDel") 删除排课
      el-button(size="small" type="primary" @click="submitHandle") 确定
</template>
<script>
import Alert from '@/components/Basic/Alert'
import { getEarlyChildren, earlyScheduleDel, earlySchedulePlan } from '../../api'

export default {
  components: {
    Alert
  },
  props: {
    course: {
      type: Object,
      default: () => ({})
    },
    visible: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      loading: false,
      delSubmitting: false,
      children: [],
      selectChildrenIds: []
    }
  },
  computed: {
    visibleDialog: {
      get () {
        return this.visible
      },
      set (val) {
        this.$emit('update:visible', val)
      }
    }
  },
  watch: {
    'course.coursePlanClassesId': {
      handler (val) {
        if (val) {
          this.getEarlyChildren()
        }
      },
      immediate: true
    }
  },
  methods: {
    getEarlyChildren () {
      this.loading = true
      getEarlyChildren({ coursePlanClassesId: this.course.coursePlanClassesId }).then(res => {
        this.children = (res.classesChildren || []).filter(x => parseFloat(x.earlyLeftCourseNum) > 0)
        this.selectChildrenIds = (res.planedChildren || []).map(x => x.childrenId)
      }).finally(() => {
        this.loading = false
      })
    },
    // 删除排课
    earlyScheduleDel () {
      this.delSubmitting = false
      earlyScheduleDel({ coursePlanClassesId: this.course.coursePlanClassesId }).then(() => {
        this.$message.success('删除排课成功')
        this.$emit('getList')
        this.$_handleCancel()
      }).finally(() => {
        this.delSubmitting = false
      })
    },
    // 学生安排
    submitHandle () {
      const { course, selectChildrenIds } = this
      console.log(selectChildrenIds)
      this.submitting = true
      earlySchedulePlan({
        coursePlanClassesId: course.coursePlanClassesId,
        childrenIds: selectChildrenIds.join()
      }).then(() => {
        this.$emit('getList')
        this.$_handleCancel()
      }).finally(() => {
        this.submitting = false
      })
    },
    $_handleCancel () {
      this.visibleDialog = false
    }
  }
}
</script>
<style lang="scss" scoped>
.title{
  margin-bottom: 24px
}
</style>
